import { DiamondNode, DiamondNodeModel, h } from "@logicflow/core";
class SquareModel extends DiamondNodeModel {
  setAttributes() {
    const size = 80;

    // this.width = size;
    this.size = size;
    // this.anchorsOffset = [
    //  [size / 2, 0],
    //  [-size / 2, 0]
    // ];

    // const circleOnlyAsTarget = {
    //  message: "正方形节点下一个节点只能是圆形节点",
    //  validate: (source, target) => {
    //   return target.type === "circle";
    //  },
    // };

    // this.width = 200;
    // this.height = 50;
    // this.radius = 10;
    // this.rx = 10;
    // this.ry = 10;
    // this.anchorsOffset = [
    //  [200 / 2, 0],
    //  [-50 / 2, 0]
    // ];
    // this.sourceRules.push(circleOnlyAsTarget);
  }
  getTextStyle() {
    const { refX = 0, refY = 0 } = this.properties;
    const style = super.getTextStyle();

    // 通过 transform 重新设置 text 的位置：向下移动70px
    return {
      ...style,
      // transform: `matrix(1 0 0 1 ${refX} ${refY})`,
      transform: `matrix(1 0 0 1 ${refX} ${refY + 60})`,
    };
  }
}
class SquareView extends DiamondNode {
  getShape() {
    // 通过 getAttributes 获取 model 中的属性
    const {
      x,
      y,
      fill = "#ffffff",
      width = 200,
      height = 50,
      stroke = "rgb(0, 0, 0)",
      strokeWidth = 2,
    } = this.props.model;

    // console.log(this);
    const halfWidth = width / 2;
    const halfHeight = height / 2;

    // 菱形的四个顶点坐标
    const points = [
      x - halfWidth,
      y, // 左上
      x,
      y - halfHeight, // 顶部
      x + halfWidth,
      y, // 右上
      x,
      y + halfHeight, // 底部
    ];

    const attrs = {
      // rect 标签的 x，y 对应的是图形的左上角
      // 所以我们要将矩形的中心移动到 x，y
      x: x - (width / 2),
      y: y - (height / 2),
      width,
      height,
      stroke,
      fill,
      strokeWidth,
      points: points.join(" "),
      // radius, rx, ry,
    };
    // getShape 的返回值是一个通过 h 方法创建的 svg 元素
    return h("g", {}, [
      h("polygon", { ...attrs }),
      h(
        "svg",
        {
          x: x - (width / 2) + 5,
          y: y - (height / 2) + 20,
          width: 60,
          height: 60,
          viewBox: "0 0 1274 1024",
        },
        h("path", {
          fill: stroke,
          d: "M286.165333 798.165333L512 572.330667l225.834667 225.834666 60.330666-60.330666L572.330667 512l225.834666-225.834667-60.330666-60.330666L512 451.669333 286.165333 225.834667 225.834667 286.165333 451.669333 512l-225.834666 225.834667z",
        })
      ),
    ]);
  }
}
export default {
  type: "custom-diamon",
  view: SquareView,
  model: SquareModel,
};

export const apiNode = {
  id: "api",
  type: "custom-diamon",
  x: 1300,
  y: 250,
  text: {
    x: 1300,
    y: 250,
    value: "API endpoint",
  },
  properties: {
    style: {
      fill: "#f0f0f0",
      stroke: "#000",
    },
    fontSize: 12,
  },
};
